<script setup lang="ts">
import {ref,h,resolveComponent} from 'vue'
import {QYComponent} from "../../../domains/qy-component.ts";

const edit = ref(null)
const page = ref({
  height: 560,
  width: 944,
})

const widgetStore = ref<QYComponent[]>([])

const 测试数据 = [{
  uuid:'123',
  attr: {
    x: 10,
    y: 10,
    width: 90,
    height: 20,
  },
}]

const dropToAddCom = (ev) => {
  ev.preventDefault()
  const rest = edit.value.getBoundingClientRect();
  测试数据[0].attr.x = Math.round(ev.clientX - rest.x)
  测试数据[0].attr.y = Math.round(ev.clientY - rest.y)
  widgetStore.value = [...测试数据];
}

const dragOver = (ev) => {
  ev.preventDefault()
}

const handleMouseDown = (ev) => {

}

</script>

<template>
  <div class="holder" id="viewport" ref="viewport" data-type="viewport">
    <div
        :style="{
          height: page.height + 'px',
          width: page.width + 'px'
          }"
        ref="edit"
        class="screen"
        @dragover.prevent="dragOver"
        @drop="dropToAddCom($event)"
    >

      <!-- 组件 -->
      <div
          v-for="(moduleData,index) in widgetStore"
          :style="{
          position: 'absolute',
          top: `${moduleData.attr.y}px`,
          left: `${moduleData.attr.x}px`,
          width: `${moduleData.attr.width}px`,
          height:`${moduleData.attr.height}px`
        }"
      >
        <component
            style="font-size: 13px;"
            is="span"
            :com="moduleData"
        >文本</component>
      </div>

    </div>
  </div>
</template>

<style scoped>
.holder {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: left;
  overflow: auto;
  font-size: 0;
  border: 1px solid #f5f5f5;
  border-width: 0 1px;
  background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0),
  linear-gradient(45deg, #f5f5f5 25%, transparent 0, transparent 75%, #f5f5f5 0);
  background-position: 0 0, 13px 13px;
  background-size: 26px 26px;
}

.screen {
  margin: 20px;
  transform-origin: center top;
  position: relative;
  box-shadow: 0 0 5px 1px #cccccc;
  background-color: #ffffff;
  background-repeat: no-repeat;
}

.wrapper {
  margin: 20px;
  position: relative;
}
</style>